<template>
  <div class="Dropmenu">
    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item disabled title="全部" />
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        title="价格"
        @change="changePrice"
      />
      <van-dropdown-item
        v-model="value2"
        :options="filterCategory"
        title="分类"
        @change="changeKind"
      />
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  name: "Dropmenu",
  props: ["filterCategory"],
  data() {
    return {
      value1: 'asc',//由高到低
      option1: [
        { text: "价格从高到低", value: 'desc' },
        { text: "价格从低到高", value: 'asc' },
      ],
      //   option3: [
      //     { text: "默认排序", value: "a" },
      //     { text: "好评排序", value: "b" },
      //     { text: "销量排序", value: "c" },
      //   ],
    };
  },

  components: {},

  computed: {
    value2:{
      // 通过this.filterCategory 这个数组中的哪一项是checked ,那么该项对象的id 就是value 的值
      get(){
        let id = 0;
      this.filterCategory.forEach((item) => {
        if (item.checked) {
          id = item.value;
        }
      });
      return id;
      },
      set(val){},
      
    },
  },

  created() {},

  mounted() {},

  methods: {
    changePrice(val) {
      // 切换价格排序
      console.log(val);
      // 通过子传父的方式 将val 传给search 组件,然后search 组件拿到数据后,进行重新的请求渲染
      this.$emit("transfer", val);
    },
    changeKind(val) {
      // 切换分类
      console.log(val);
      this.$emit("transfer1", val);
    },
  },
};
</script>
<style lang='less' scoped>
</style>